<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <!-- 上来首先遍历数组渲染页面 给class绑定动态属性，用item.isDone来控制类名的显示和隐藏 -->
    <li :class="{ completed: item.isDone }" v-for="item in list" :key="item.id">
      <div class="view">
        <input
          class="toggle"
          type="checkbox"
          :checked="item.isDone"
          @change="changeFn(item.id)"
        />
        <!-- 先给checked绑定动态属性，目前还没实现双向绑定 -->
        <!-- 然后在给input绑定change事件,将item.id传入.然后向父组件传值
        然后再父组件里的子组件标签里自定义一个change属性,然后将id传入,父组件里通过
        find方法查找到对应的对象,然后将此对象的isDone取反就可以了.
         -->
        <label>{{ item.name }}</label>
        <button class="destroy" @click="delFn(item.id)"></button>
        <!-- 给button绑定一个点击事件,然后传入item.id,通过$emit向父组件传值.
        父组件接收到id,通过此id然后用filer方法,来达到删除指定元素
         -->
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  // props的校验
  props: {
    list: {
      // 数据类型
      type: Array,
      requeird: true,
      // 表示必须要传值
    },
  },
  methods: {
    delFn(id) {
      this.$emit('del', id)
    },
    changeFn(id) {
      this.$emit('change', id)
    },
  },
}
</script>
